<template>
  <div class="classifys-detail">
    <van-search
      class="info_search"
      v-model="value"
      @search="onSearch"
      @clear="clearSearch"
      placeholder="搜索"
    />

    <van-list
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-if="historyList.length">
        <van-cell v-for="(v, i) in historyList" :key="i" class="card">
          <div class="history-title">【检查对象】{{ v.CFullName }}</div>
					<van-divider/>
          <div class="history-title">【关键词】{{ v.Keyword }}</div>
          <van-divider/>
          <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
          <div>【整改建议】{{ v.CorrectiveAdvise }}</div>
          <div class="apply-area">
            <div class="detail-collect">
              <img
                src="@/assets/Images/AppIcon/icon_list_industry.png"
                alt=""
              />
              <span>适用地区:{{ v.ApplyArea }}</span>
            </div>
          </div>
          <div class="apply-area">
            <div class="detail-collect">
              <div @click="getDetail(v)">
                <img
                  src="@/assets/Images/AppIcon/icon_list_detail.png"
                  alt=""
                />
                <span>详细</span>
              </div>

              <div v-if="v.IsCollected" @click="unCollected(v)">
                <img
                  src="@/assets/Images/AppIcon/icon_list_collect.png"
                  alt=""
                />
                <span>取消收藏</span>
              </div>
              <div v-else @click="Collect(v)">
                <img
                  src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                  alt=""
                />
                <span>收藏</span>
              </div>
              <div @click="Ignored(v)">
								<img
									src="@/assets/Images/AppIcon/icon_list_ignore.png"
									alt=""
								/>
								<span>忽略该依据</span>
							</div>
            </div>
            <div class="take-photo" v-if="hasPhoto" @click="goPhoto(v)">
              <van-uploader
                @oversize="onOversize"
                :after-read="afterRead"
                capture="camera"
              >
                <img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
                <span>拍照</span>
              </van-uploader>
            </div>
            <div @click="chooseClassifys(v)" class="take-photo" v-else>
              <img src="@/assets/Images/AppIcon/icon_list_add.png" alt="" />
              <span>选择</span>
            </div>
          </div>
        </van-cell>
      </div>
      <div v-else>
        <img
          class="none-data"
          src="@/assets/Images/AppIcon/common_empty_data.png"
          alt=""
        />
      </div>
    </van-list>
    <!-- 弹出层 -->
    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="dialog-content">
        <div class="dialog-title">详细信息</div>
        <div class="dialog-content-text">
          <div class="gist-source">
            <span class="dialog-description">来源：</span
            >{{ detail.GistSource }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">隐患描述：</span
            >{{ detail.HiddenDangerDesc }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">整改建议：</span
            >{{ detail.CorrectiveAdvise }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">适用地区：</span
            >{{ detail.ApplyArea }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">适用行业：</span
            >{{ detail.ApplyProfessionName }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律责任：</span
            >{{ detail.LegalLiability }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律原文：</span
            >{{ detail.OriginalText }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律法规：</span>
            <div
              class="text-list"
              v-for="(v, i) in detail.TextList"
              :key="i"
              @click="toDetail(v)"
            >
              {{ v.Name }}
            </div>
          </div>
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="close">取消</span>
            <span class="complete-btn" @click="confirm">确定</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  getClassifys,
  getHistoryFrequency,
  Collect,
  unCollected,
  getDetail,
  UnInterested,
} from "@/api/sytech/sytechDangerLawGist";
import { upload } from "@/api/common";
export default {
  data() {
    return {
      value: "",
      finished: false,
      loading: false,
      filter: {
        page: 0,
        dataType: "",
        cCode: "",
        keywords: "",
      },
      historyList: [],
      show: false,
      detail: {},
      vobj: {},
      fileList: [],
      id: "",
      hasPhoto: "",
    };
  },
  created() {
    console.log("this.$route.params.id!=", this.$route.params.id);
    if (this.$route.params.id || this.$route.params.id == 0) {
      this.id = this.$route.params.id;
      const ClassifysData = this.$route.params;
      this.$store.commit("setClassifysData", ClassifysData);
    }
    this.filter.cCode = this.$route.query.cCode;
    this.filter.dataType = "PublicUsed";
	  this.hasPhoto = this.$route.query.hasPhoto;
  },

  // beforeRouteLeave(to, from, next) {
  // 	to.params.path = this.$route.params.path
  // 	to.params.id = this.$route.params.id
  // 	next() //继续下一步
  // },
  methods: {
    onSearch() {
      this.filter.page = 0;
      this.filter.keywords = this.value;
      this.getHistoryFrequency();
    },
    clearSearch() {
      this.filter.page = 0;
      this.filter.keywords = "";
      this.getHistoryFrequency();
    },
    // 选择检查依据
    chooseClassifys(item) {
      // if (this.id || this.id == 0) {
      // 	this.$router.push({
      // 		name: this.$route.params.path,
      // 		params: {
      // 			classifysData: item,
      // 		},
      // 	})
      // }
      this.id = this.$store.state.ClassifysData.id;
      const path = this.$store.state.ClassifysData.path;
      if (this.id || this.id == 0) {
        this.$router.push({
          name: path,
          params: {
            classifysData: item,
            id: this.id,
          },
        });
      }
    },
    goPhoto(item) {
      this.vobj = item;
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.fileList.push(item.FilePath);

            this.$router.push({
              name: "DangerCheckTaskDetailEdit",
              params: {
                file: item.FilePath,
                vobj: this.vobj,
              },
              query: {
                ctCode: this.$route.query.ctCode || "",
                originType: 2,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },

    onLoad() {
      if (!this.filter.keywords) {
        return;
      }
      this.loading = true;
      ++this.filter.page;
      getHistoryFrequency(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.historyList = this.historyList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    getHistoryFrequency() {
      this.loading = true;
      getHistoryFrequency(this.filter).then((res) => {
        // console.log(res, 'res')
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        this.filter.page = res.data.PageIndex;
        this.historyList = res.data.Data;
      });
    },
    // 收藏
    Collect(item) {
      const param = {
        lgCode: item.LGCode,
      };
      Collect(param).then((res) => {
        // console.log(res, 'res')
        this.filter.page = 0;

        this.getHistoryFrequency();
      });
    },
    // 取消收藏
    unCollected(item) {
      const param = {
        lgCode: item.LGCode,
      };
      unCollected(param).then((res) => {
        // console.log(res, 'res')
        this.filter.page = 0;

        this.getHistoryFrequency();
      });
    },
    // 详细getDetail
    getDetail(item) {
      const param = {
        lgCode: item.LGCode,
      };
      this.show = true;
      getDetail(param).then((res) => {
        res.data.TextList = JSON.parse(res.data.TextList);
        this.detail = res.data;
      });
    },
    Ignored(item) {
      const param = {
        lgCode: item.LGCode,
      };
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要忽略此条依据吗？",
        })
        .then(() => {
          console.log(11111111);
          UnInterested(param).then((res) => {
            _this.getHistoryFrequency();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 关闭
    close() {
      this.show = false;
    },
    confirm() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>

.classifys-detail {
  min-height: 100vh;
  background-color: #e8f1f8;
}
.all_dep {
  background-color: #ffffff;
}

.history-content {
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
  .line {
    width: 100%;
    height: 0.5px;
    background-color: #eee;
    margin: 5px;
  }
}
.none-data {
  width: 100%;
  height: 100%;
}

.apply-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  .detail-collect {
    display: flex;
    align-items: center;

    > div {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  .take-photo {
    display: flex;
    align-items: center;
    img {
      width: 16px;
      height: 18px;
      vertical-align: middle;
    }
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
// 弹框
.dialog-content {
  position: relative;

  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 16px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
}
.dialog-content-text {
  height: 50vh;
  overflow-y: auto;
  padding: 3px 15px;
  font-size: 13px;
  color: #666;
  .gist-source {
    margin-bottom: 15px;
    line-height: 1.3;
  }
  .gist-source:last-child {
    margin-bottom: 0;
  }
  .text-list {
    margin-top: 5px;
    color: rgb(0, 141, 101);
  }
  .dialog-description {
    color: #000;
  }
}
.dialog-content-text::-webkit-scrollbar {
  display: none;
}

.van-divider{
  margin: 0px;
}
</style>
